<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="/js/axios.js"></script>
		<script src="/js/vue.js"></script>
		<script src="/js/element-ui/index.js"></script>
		<link rel="stylesheet" type="text/css" href="/js/element-ui/index.css" />
	</head>
	<body>
		<div id="box">
			<div th:if="${session.SPRING_SECURITY_CONTEXT.authentication.principal.role}=='C'" th:include="~{common/nav-head::head}"></div>
			<div th:if="${session.SPRING_SECURITY_CONTEXT.authentication.principal.role}=='A'" th:include="~{common/nav-manager::manager}"></div>
			<div style="padding-top: 100px;">
				<span>个人信息</span>
				<el-button type="primary" icon="el-icon-edit" @click="isUpdate = true" circle></el-button>
				<el-descriptions style="margin: auto;" :column="1" direction="horizontal" border>
					<el-descriptions-item label="头像">
						<el-avatar :size="70">
							<img th:src="@{'/api/public/show/'+${session.SPRING_SECURITY_CONTEXT.authentication.principal.pictureId}}"/>
						</el-avatar>
					</el-descriptions-item>
					<el-descriptions-item label="账号">
						<span th:text="${session.SPRING_SECURITY_CONTEXT.authentication.principal.username}"></span>
					</el-descriptions-item>
					<el-descriptions-item label="昵称">
						<span th:text="${session.SPRING_SECURITY_CONTEXT.authentication.principal.nickname}"></span>
					</el-descriptions-item>
					<el-descriptions-item label="联系电话">
						<span th:text="${session.SPRING_SECURITY_CONTEXT.authentication.principal.phone}"></span>
					</el-descriptions-item>
				</el-descriptions>
				<el-dialog :visible.sync="isUpdate" width="30vw" center>
					<el-form :model="user">
						<el-form-item label="昵称">
							<el-input style="width: 17vw;" v-model="user.nickname"></el-input>
						</el-form-item>
						<el-form-item label="头像">
							<el-upload style="margin-left: 8vw;" :multipe="false" :show-file-list="true"
								:auto-upload="false" :file-list="fileList" :before-upload="beforeUpload"
								:on-change="handleChange" action="uploadAction" list-type="picture"
								accept="image/jpg,image/jpeg,image/png">
								<el-avatar :size="55">
									<img th:src="@{'/api/public/show/'+${session.SPRING_SECURITY_CONTEXT.authentication.principal.pictureId}}"/>
								</el-avatar>
							</el-upload>
						</el-form-item>
						<el-form-item label="账号">
							<el-input style="width: 17vw;" v-model="user.username" readonly></el-input>
						</el-form-item>
						<el-form-item label="密码">
							<el-input style="width: 17vw;" v-model="user.password" show-password></el-input>
						</el-form-item>
						<el-form-item label="电话">
							<el-input style="width: 17vw;" v-model="user.phone"></el-input>
						</el-form-item>
					</el-form>
					<span slot="footer" style="margin-left: 3vw;">
						<el-button @click="cancel()">取 消</el-button>
						<el-button type="primary" @click="update()">确 定</el-button>
					</span>
				</el-dialog>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: "#box",
			data: {
				isUpdate: false,
				fileList: [],
				user: {
					image: null,
					nickname: null,
					username: null,
					password: null,
					phone: null,
					role: null
				}
			},
			methods: {
				go2Index() {
					window.location.href = "/"
				},
				beforeUpload(file) {
					//console.log("beforeUpload="+file)
				},
				handleChange(file, fileList) {
					this.fileList = fileList
				},
				cancel() {
					this.isUpdate = false
				},
				update() {
					this.isUpdate = false
					let _this = this
					let files = this.fileList
					let formdata = new FormData()
					for (key in this.user) {
						if (this.user[key] != null) {
							formdata.append(key, this.user[key])
						}
					}
					if (files.length > 0 && files[0].raw != null) { // 有文件上传
						formdata.append("img", files[0].raw)
					}
					axios({
						url: "/api/cons/user/update",
						method: "post",
						headers: {
							'Content-Type': 'multipart/form-data;charset=UTF-8'
						},
						data: formdata
					}).then(function(response) {
						if (response.data.code == 200) {
							_this.$message({
								message: '修改成功',
								showClose: 'true',
								type: 'success'
							})
						}
					})
				}
			},
			mounted() {
			}
		})
	</script>
</html>
